// Style ddmarker content a bit. Almost all these styles are copied from Moodle.
addon-qtype-ddmarker {
    .ddarea, .ddform {
        user-select: none;
    }

    .qtext {
        margin-bottom: 0.5em;
        display: block;
    }

    div.droparea img {
        border: 1px solid $gray-darker;
        max-width: 100%;
    }

    .draghome img, .draghome span {
        visibility: hidden;
    }

    .dragitems .dragitem {
        cursor: pointer;
        position: absolute;
        z-index: 2;
    }

    .dropzones {
        position: absolute;
    }
    .dropzones svg {
        z-index: 3;
    }

    .dragitem.beingdragged .markertext {
        z-index: 5;
        box-shadow: $core-dd-question-selected-shadow;
    }
    .dragitems .draghome {
        margin: 10px;
        display: inline-block;
    }

    .dragitems.readonly .dragitem {
        cursor: auto;
    }
    div.ddarea {
        text-align: center;
    }
    div.ddarea .markertexts {
        min-height: 80px;
        position: absolute;
        @include text-align('start');
    }
    .dropbackground {
        margin: 0 auto;
    }

    div.dragitems div.draghome, div.dragitems div.dragitem,
    div.draghome, div.drag {
        font: 13px/1.231 arial,helvetica,clean,sans-serif;
    }
    div.dragitems span.markertext,
    div.markertexts span.markertext {
        margin: 0 5px;
        z-index: 2;
        background-color: $white;
        border: 2px solid $gray-darker;
        padding: 5px;
        display: inline-block;
        zoom: 1;
        border-radius: 10px;
        color: $text-color;
    }
    div.markertexts span.markertext {
        z-index: 3;
        background-color: $yellow-light;
        border-style: solid;
        border-width: 2px;
        border-color: $yellow;
        position: absolute;
    }
    span.wrongpart {
        background-color: $yellow-light;
        border-style: solid;
        border-width: 2px;
        border-color: $yellow;
        padding: 5px;
        border-radius: 10px;
        filter: alpha(opacity=60);
        opacity: 0.6;
        margin: 5px;
        display: inline-block;
    }
    div.dragitems img.target {
        position: absolute;
        left: -7px; /* This must be half the size of the target image, minus 0.5. */
        top: -7px;  /* In other words, this works for a 15x15 cross-hair. */
    }
    div.dragitems div.draghome img.target {
        display: none;
    }
}
